<template>
  <div class="page" style="">
    <div class="print_title">物资调拨申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseBill }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposer_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applicant_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >物品用途:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseUse }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <p class="title">调出信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调出团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.exportTeamId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调出日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ moment(formData.exportTime).format('YYYY-MM-DD HH:mm') }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调出仓库:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.exportWarehouse_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <p class="title">调入信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调入团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.foldTeamId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调入日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ moment(formData.foldTime).format('YYYY-MM-DD HH:mm') }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >调入仓库:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.foldWarehouse_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 物品领用明细列表 -->
    <a-row type="flex" justify="center" v-if="dataSource && dataSource.length">
      <a-col>
        <p class="title_table">物资明细</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  import moment from 'moment'
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        moment,
        dataSource: [], // 印章列表
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 45,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '物料大类',
            align: 'center',
            width: 65,
            dataIndex: 'provisionBroad_dictText'
          },
          {
            title: '物料小类',
            align: 'center',
            width: 65,
            dataIndex: 'provisionSmall_dictText'
          },
          {
            title: '物料编号',
            align: 'center',
            width: 65,
            dataIndex: 'materialBillId'
          },
          {
            title: '物料名称',
            align: 'center',
            width: 65,
            dataIndex: 'materialName_dictText'
          },
          {
            title: '物料规格',
            align: 'center',
            width: 65,
            dataIndex: 'specification'
          },
          {
            title: '品牌',
            align: 'center',
            width: 65,
            dataIndex: 'brand'
          },
          {
            title: '单位',
            align: 'center',
            width: 45,
            dataIndex: 'unit_dictText'
          },
          {
            title: '数量',
            align: 'center',
            width: 65,
            dataIndex: 'amount'
          },
          // 迭代16.7隐藏字段
          // {
          //   title: '供应商',
          //   align: 'center',
          //   width: 65,
          //   dataIndex: 'supplier_dictText'
          // },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          }

        ],
        dataHistorySource: [], // 流程列表
        url: {
            historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
            allList: '/api/erp/purchase/recipients/erpPurchaseCannibalizeDetail/allList', // 物品领用明细列表
            queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById' // 獲取詳情
        },
        purchaseFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData: {
        handler (val) {
            if (val) {
              this.getHistoryList()
              this.initObj()
              if (val.purchaseFile) {
                this.purchaseFile = val.purchaseFile.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
        handler (val) {
          if (val) {
              this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },

      // 获取印章
      initObj() {
        let url = '';
          let param = {};
          url = this.url.allList;
          param = { billId: this.formData.id };
          getAction(url, param).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records || res.result
              this.dataSource.forEach((item, index) => {
                item.key = index
              })
            }
          });
      },

      tableRowClass(record, index) {
        console.log('record, index', record, index)
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content{
  font-size: 13px;
}
</style>
